<template>
  <div style="font-weight: bold">
    <el-text class="mx-1" type="primary">文&ensp;</el-text>
    <el-text class="mx-1" type="success">心&ensp;</el-text>
    <el-text class="mx-1" type="warning">一&ensp;</el-text>
    <el-text class="mx-1" type="danger">言</el-text>
    <el-divider>
      <el-icon>
        <star-filled/>
      </el-icon>
    </el-divider>
  </div>
  <div class="chat-content">
    <div class="chat-user" v-show="user_input_status" style="max-width: 500px">
      <el-text id="text-user" style="height: 100%;font-size: 15px;"></el-text>
      <el-avatar
          src="http://39.101.138.17:9000/wenfeng/%E5%B0%8F%E9%BB%91.jpg"/>
    </div>
    <div class="chat-bot" style="max-width: 500px">
      <el-avatar
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      />
      <el-text id="text-bot" style="height: 100%;font-size: 15px;"></el-text>
    </div>
  </div>
  <div class="user-input">
    <div class="mt-4">
      <el-input
          maxlength="2000"
          v-model="input_content"
          style="max-width: 600px"
          placeholder="请输入您的问题,限制在2000字以内"
          class="input-with-select"
      >
        <template #append>
          <el-button :icon="Promotion" @click="submitMessage" style="color: dodgerblue"/>
        </template>
      </el-input>
    </div>
  </div>
</template>

<script setup>
import {
  StarFilled,
  Promotion,
  UserFilled,
} from '@element-plus/icons-vue'

import {onMounted, ref} from 'vue'
import {ElMessage} from 'element-plus'
import axios from 'axios'
import { ElLoading } from 'element-plus'

let user_input_status = ref(false)

let input_content = ref("")

let message_list = ref([
  {"bot_text": "您好,有什么可以帮助您的?", "user_text": null}
])

onMounted(() => {
  showMessage()

})

let showMessage = () => {
  for (let i = 0; i < message_list.value.length; i++) {
    const bot_text = message_list.value[i].bot_text
    if (message_list.value[i].user_text !== null) {
      user_input_status.value = true
      const user_text = document.getElementById("text-user")
      user_text.innerText = message_list.value[i].user_text
      let index = 0
      const container = document.getElementById("text-bot")
      //流式输出回答的内容
      const timer = setInterval(() => {
        if (index <= bot_text.length) {
          container.innerText = bot_text.substring(0, index)
          index++
        } else {
          clearInterval(timer)
        }
      }, 100)
    } else {
      let index = 0
      const container = document.getElementById("text-bot")
      //流式输出回答的内容
      const timer = setInterval(() => {
        if (index <= bot_text.length) {
          container.innerText = bot_text.substring(0, index)
          index++
        } else {
          clearInterval(timer)
        }
      }, 100) // 每隔100毫秒显示一个字符
    }
  }
}

const submitMessage = () => {
  // ElMessage({
  //   message: '提交的内容是：' + input_content.value,
  //   type: 'success',
  //   plain: true,
  // })
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  axios.get('/ltj/wenxin?message=' + input_content.value)
      .then(function (response) {
        loading.close()
        message_list.value.splice(message_list.value.length, 0,
            {"bot_text": response.data, "user_text": input_content.value})
        showMessage()
      })
      .catch(function (error) {
        loading.close()
        ElMessage({
          message: '请求失败,请稍后再试试。',
          type: 'error',
          plain: true,
        })
      });
}

</script>

<style>
.chat-bot {
  float: left;
  margin-top: 60px;
}

.chat-user {
  float: right;
}

.user-input {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
</style>